<template>
    <div>
        <!-- 这里是个人中心首页的头部信息栏 -->
        <div class="top" @click="$router.push('/edit')">
            <img v-if="userInfo.head_img" :src="$axios.defaults.baseURL+userInfo.head_img" alt class="avatar" />
            <img v-else src="@/assets/avatar.jpg" alt class="avatar" />
            <div class="info">
                <div class="name">
                    <!-- <span v-if="userInfo.gender == 1" class="iconfont iconxingbienan"></span>
                    <span v-if="userInfo.gender == 0" class="iconfont iconxingbienv"></span> -->
                    <!-- 如果一个 dom 同时设置了动态 class 和写死的 class 不会覆盖而是拼接起来 -->
                    <span class="iconfont" :class="{
                        iconxingbienan: userInfo.gender == 1,
                        iconxingbienv: userInfo.gender == 0
                    }"></span>
                    {{userInfo.nickname}}
                </div>
                <!-- 如果有数据, 需要用 split 来切割的话, 需要 v-if 等待数据的响应 再渲染 -->
                <!-- <div class="date" v-if="userInfo.create_date">{{userInfo.create_date.split('T')[0]}}</div> -->
                <div class="date">2020-09-20</div>
            </div>
            <span class="iconfont iconjiantou1"></span>
        </div>
        <!-- 下面是横条组件 -->
        <PersonalCell
            label="我的关注"
            desc="关注的用户"
            @click="$router.push('/follows')"
        />
        <PersonalCell
            label="我的跟帖"
            desc="跟帖 / 回复"
            @click="$router.push('/mycomment')"
        />
        <PersonalCell
            label="我的收藏"
            desc="文章 / 视频"
            @click="$router.push('/star')"
        />
        <PersonalCell
            label="设置"
            @click="$router.push('/edit')"
        />
        <PersonalCell
            label="退出"
            @click="logout"
        />

    </div>
</template>

<script>
    import PersonalCell from "@/components/PersonalCell";
    export default {
        data() {
            return {
                userInfo: {}
            }
        },
        created() {
            // 页面创建成功, 可以拿到 token
            console.log('到了个人中心页');
            console.log(localStorage.getItem('token'));
            // 页面进来, 需要马上获取数据
            this.$axios({
                url: '/user/' + localStorage.getItem('userId'),
            }).then(res=>{
                console.log(res.data);
                // 获取成功将用户数据存放到当前的 data 当中
                // 不能保证进来的用户都是有权限的

                if (res.data.message == '获取成功') {
                    // 赋值渲染
                    this.userInfo = res.data.data
                }
            })
        },
        components: {
            PersonalCell,
        },
        methods: {
            logInfo(pageName) {
                // 这里只是log 出一个数据而已
                console.log(pageName);
                // 之后的逻辑全部都可以写在这里
            },
            logout() {
                // 退出登录的函数
                // 清理数据
                // removeItem 清理单一属性
                // localStorage.removeItem(key)
                localStorage.clear()
                // 跳转页面
                // this.$router.push('/login')
                this.$router.replace('/login')
            }
        }
    };
</script>

<style lang="less" scoped>
    .top {
        display: flex;
        align-items: center;
        padding: 24/360 * 100vw;
        border-bottom: 4px solid #e4e4e4;
        .avatar {
            width: 70/360 * 100vw;
            height: 70/360 * 100vw;
            border-radius: 50%;
            // 解决 img 标签的变形问题
            // 常用选项 cover / contain
            object-fit: cover;
        }
        .info {
            // 自动占据剩余空间
            flex: 1;
            padding-left: 10/360 * 100vw;
            font-size: 14/360 * 100vw;
            .iconxingbienan {
                color: #83bfec;
            }
            .iconxingbienv {
                color: #f43dbf;
            }
            .date {
                color: #888;
                padding-top: 6/360 * 100vw;
            }
        }
    }
</style>